<template>
  <div class="all">
    <!--    头部 标题-->
    <van-sticky class="header" :offset-top="0">
      <van-nav-bar
        title="历史记录"
      >
        <template #left>
          <span class="fanhui" @click="onClickLeft">
            <img src="../../assets/返回.png" alt="">
            <span class="sides">返回</span>
          </span>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div>
      <ul class="ulList"
          v-for="(item, index) in getArr"
          :key="index"
          :id="item.HEALTHDATADYNAMIC_ID"
          @click="go(listArr[index].url,
                 item.HEALTHDATADYNAMIC_ID,
                 item.NAME,
                 item.UNIT)"
      >
        <!--                  :class="[xuetangList[0].content != undefined && xuetangList[1].content != undefined && index === 3 ? 'height' : 'ulList']"-->
        <li class="left">
          <img :src="listArr[index].img" alt="">
          <a class="title">{{item.NAME}}</a>
        </li>
        <li class="center" >
          <div class="center_Top" v-if="index != 3">
            <a style="font-size: 16px;margin-top: 2vw;margin-bottom: 3vw;color: #999999">
            </a>
            <a class="num" v-if="everyList[index] != undefined && index != 3">{{everyList[index].content}}</a>
            <a class="unit" v-if="everyList[index] != undefined && everyList[index].content != undefined && index != 3"> {{item.UNIT}}</a>
          </div>
          <div style="margin: 5px 0" v-if="xuetangList[0] != undefined && xuetangList[0].content != undefined && index === 3" class="center_Top" >
            <a style="font-size: 16px;color: #999999" v-if="xuetangList[0] != undefined && xuetangList[0].content != undefined">{{xtColumns[0]}}</a>
            <a class="num">{{xuetangList[0].content}}</a>
            <a class="unit">{{item.UNIT}}</a>
          </div>
          <div style="margin: 5px 0" v-if="xuetangList[1] != undefined && xuetangList[1].content != undefined && index === 3" class="center_Top" >
            <a style="font-size: 16px;color: #999999">{{xtColumns[1]}}</a>
            <a class="num">{{xuetangList[1].content}}</a>
            <a class="unit">{{item.UNIT}}</a>
          </div>
          <div style="margin: 5px 0" v-if="xuetangList[2] != undefined && xuetangList[2].content != undefined && index === 3" class="center_Top" >
            <a style="font-size: 16px;color: #999999">{{xtColumns[2]}}</a>
            <a class="num">{{xuetangList[2].content}}</a>
            <a class="unit">{{item.UNIT}}</a>
          </div>
        </li>
        <li class="right" v-if="index != 3">
        </li>
        <li class="right" v-else >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import $ from 'jquery'
export default {
  name: 'InfoHealth',
  data () {
    return {
      getArr: [],
      everyList: [],
      time: '',
      listArr: [
        {
          'name': '运动',
          'unit': '千卡',
          'img': require('../../assets/运动@2x.png'),
          'url': 'run',
          'id': '1',
          'null': '0'
        },
        {
          'name': '睡眠',
          'unit': '小时',
          'img': require('../../assets/睡眠@2x.png'),
          'url': 'run',
          'id': '2',
          'null': '0.0'
        },
        {
          'name': '血压',
          'unit': '毫米汞柱',
          'img': require('../../assets/血压@2x.png'),
          'url': 'run',
          'id': '3',
          'null': '0'
        },
        {
          'name': '血糖',
          'unit': '毫摩尔/升',
          'img': require('../../assets/血糖@2x.png'),
          'url': 'run',
          'id': '4',
          'null': '0'
        },
        {
          'name': '心率',
          'unit': '次/分',
          'img': require('../../assets/心率@2x.png'),
          'url': 'run',
          'id': '5',
          'null': '0'
        },
        {
          'name': '体重',
          'unit': '公斤',
          'img': require('../../assets/体重@2x.png'),
          'url': 'run',
          'id': '6',
          'null': '0.00'
        }
      ],
      xuetangList: [],
      xtColumns: ['餐前', '餐后一小时', '餐后两小时']
    }
  },
  mounted () {
    // 从网址上截取 userid 后面的值
    this.userid = this.$utils.getUrlKey('userid')
    this.time = this.$utils.getUrlKey('time')
    this.get()
  },
  methods: {
    // 获取
    get () {
      // axios.get('http://jmx-kfdj.com/kfhl/healthdataDynamic/findHealthdataDynamic')
      this.$http.findHealthdataDynamic()
        .then(res => {
          // console.log(res.data)
          this.getArr = res.data
          this.getDateList(this.userid, this.time.split(' ')[1])
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 请求选择 某一天的 所有列的数据
    getDateList (userid, time) {
      // axios.get('http://jmx-kfdj.com/kfhl/healthdata/findHealthdataByName', {params: {userid: userid, time: time}})
      this.$http.findHealthdataByName({userid: userid, time: time})
        .then(res => {
          // console.log(res)
          this.everyList = []
          var xueTang = []
          for (var i = 0; i < res.data.length; i++) {
            if (i === 0) {
              xueTang.push(res.data[i])
            } else {
              if (i === 4) {
                this.everyList.splice(3, 0, '')
              } else {
              }
              this.everyList.push(res.data[i])
            }
          }
          this.xuetangList = xueTang[0][4]
          if (this.xuetangList[0].content !== undefined && this.xuetangList[1].content !== undefined && this.xuetangList[2].content !== undefined) {
            $('.ulList').eq(3).css({'height': 'auto'})
          } else if (this.xuetangList[0].content !== undefined && this.xuetangList[1].content !== undefined) {
            $('.ulList').eq(3).css({'height': 'auto'})
          } else if (this.xuetangList[0].content !== undefined && this.xuetangList[2].content !== undefined) {
            $('.ulList').eq(3).css({'height': 'auto'})
          } else if (this.xuetangList[1].content !== undefined && this.xuetangList[2].content !== undefined) {
            $('.ulList').eq(3).css({'height': 'auto'})
          } else {
            $('.ulList').eq(3).css({'height': '20vw'})
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    onClickLeft () {
      window.history.go(-1)
    },
    // 转换时间
    formatDate (date, today) {
      var YY = date.getFullYear()
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      if (today === 1) {
        return YY + '/' + MM + '/' + DD
      } else {
        return YY + '-' + MM + '-' + DD
      }
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .all{
    width: 100vw;
    height: 100vh;
    background: #FAF9FE;
  }
  .fanhui{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  /deep/ .van-nav-bar__title{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .ulList{
    width: 95vw;
    height: 20vw;
    background-color: #fff;
    border-radius: 10px;
    margin: 3vw auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .ulList:nth-child(4){
    /*height: 20vw;*/
  }
  .height{
    height: auto !important;
  }
  .left{
    /*width: 30vw;*/
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 4vw;
    font-family: PingFang SC;
    /*font-weight: bold;*/
    color: #333333;
    margin-left: 5vw;
    /*background-color: blanchedalmond;*/
  }
  .left img{
    width: 6vw;
    height: 6vw;
    margin-right: 3vw;
  }
  .center{
    width: 53%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
  }
  .center .num{
    /*font-size: 5vw;*/
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1DA4F2;
    margin-left: 0.5vw;
  }
  .center  .center_Top{
    width: 100%;
    /*margin: 2.5vw auto;*/
  }
  .center  .center_Bottom{
    /*width: 36vw;*/
    margin: 2vw 0;
  }
  .center .unit, .time{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-bottom: 2vw;
  }
  .right{
    margin-right: 8vw;
    /*background-color: blanchedalmond;*/
  }
  .right img{
    width: 8vw;
    height: 8vw;
  }
  .title{
    font-size: 4vw;
  }
  /deep/ .van-image__img{
    width: 11vw;
  }
  /deep/ .van-nav-bar{
    height: 12vw;
  }
</style>
